<template>

    <section class="banner-section" id="banner-section">

        <div class="background">
            <img class="background-image" src="https://acming.oss-cn-chengdu.aliyuncs.com/2024/image/img1.png">
            <div class="slider-grid">
                <div class="grid-item hide"></div>
                <div class="grid-item hide"></div>
                <div class="grid-item hide"></div>
                <div class="grid-item hide"></div>
                <div class="grid-item hide"></div>
                <div class="grid-item hide"></div>
            </div>
        </div>

        <div class="banner-content">

            <h1 class="banner-title" data-aos="fade-up">explore <br>the world</h1>
            <span class="btn">travel</span>
        </div>

        <img src="@/assets/image/down.png" class="scroll-down-icon">
    </section>


</template>

<script setup>
import { onMounted, reactive, ref } from 'vue';

const sliderImage = ref(['https://acming.oss-cn-chengdu.aliyuncs.com/2024/image/img1.png', 'https://acming.oss-cn-chengdu.aliyuncs.com/2024/image/img2.png', 'https://acming.oss-cn-chengdu.aliyuncs.com/2024/image/img3.png', 'https://acming.oss-cn-chengdu.aliyuncs.com/2024/image/img4.png', 'https://acming.oss-cn-chengdu.aliyuncs.com/2024/image/img5.png', 'https://acming.oss-cn-chengdu.aliyuncs.com/2024/image/img6.png'])
let slider = reactive([]);
let sliderGridItem = reactive([]);
let currentImage = ref(0)

const initImage = () => {

    setInterval(() => {
        changeSliderImage()
    }, 5000)
}
const changeSliderImage = () => {
    sliderGridItem.map((gridItem, index) => {
        setTimeout(() => {
            gridItem.classList.remove('hide');
            setTimeout(() => {
                if (index === sliderGridItem.length - 1) {
                    if (currentImage.value >= sliderImage.value.length - 1) {
                        currentImage.value = 0
                    } else {
                        currentImage.value++;
                    }
                    slider.src = sliderImage.value[currentImage.value]

                    sliderGridItem.map((item, i) => {
                        setTimeout(() => {
                            item.classList.add('hide')
                        }, i * 100)
                    })
                }
            }, 0)
        }, index * 100)
    })
}

onMounted(() => {
    slider = document.querySelector(".background-image")
    sliderGridItem = [...document.querySelectorAll(".grid-item")]
    initImage()
})


</script>



<style lang="scss" scoped>
.banner-section {
    width: 100%;
    height: 100vh;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;

    .banner-title {
        font-weight: bolder;
        font-size: 60px;
        text-align: center;
        text-transform: capitalize;
    }

    .banner-content .btn {
        display: inline-block;
        margin-top: 10px;
        cursor: pointer;
        text-align: center;
        font-size: 26px;
        padding: 10px 20px;
        border: .1rem solid #fff;
    }

    .banner-content .btn:hover {
        background-color: #161813;
        border: .1rem solid #222;
    }

    .background {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: -1;

        .background-image {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
    }

    .background::before,
    .background::after {
        content: '';
        position: absolute;
        left: 0;
        width: 100%;
        height: 50%;
    }

    .background::before {
        top: 0;
        left: 0;
        background: linear-gradient(0deg, rgba(22, 24, 19, 0) 0%, rgba(22, 24, 19, 0.22) 36.98%, rgba(22, 24, 19, 0.47) 70.83%, rgba(22, 24, 19, 0.76) 100%);
    }

    .background::after {
        bottom: 0;
        left: 0;
        background: linear-gradient(180deg, rgba(22, 24, 19, 0) 0%, rgba(22, 24, 19, 0.42) 21.88%, rgba(22, 24, 19, 0.69) 41.67%, rgba(22, 24, 19, 0.9) 61.98%, rgba(22, 24, 19, 0.99) 78.12%, #161813 100%);
    }

    .slider-grid {
        width: 100%;
        height: 100%;
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        grid-template-rows: repeat(2, 1fr);
    }

    .grid-item {
        width: 100%;
        height: 100%;
        background: #161813;
        opacity: 1;
        transition: .5s;
        pointer-events: none;
    }

    .grid-item.hide {
        opacity: 0;
    }
}

.scroll-down-icon {
    position: absolute;
    bottom: 10%;
    left: 50%;
    transform: translateX(-50%);
    width: 20px;
    animation: down 1s infinite ease;
}

@keyframes down {
    from {
        bottom: 10%;
    }

    to {
        bottom: 6%;
    }
}

@media (max-width:991px) {
    .banner-section .banner-title {
        font-size: 40px;
    }

}

@media (max-width:768px) {
    .slider-grid {
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: repeat(3, 1fr);
    }


}
</style>